<template>
  <div class="education-container">
    <!-- 头部卡片信息 -->
    <div class="header-container">
      <div class="search-box flex align-center justify-content-space-between">
        <div class="search-title">以党建促医建，以学习强服务，以初心护生命</div>
        <div class="search-input-box flex align-center">
          <el-input v-model="courseListRequest.StudyCourseName" :prefix-icon="Search" class="search" placeholder="请输入学习内容..."></el-input>
          <el-button class="search-button" type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
      <!-- banner区域 -->
      <div class="banner-container">
          <div class="left-box">
                <div class="title">学习贯彻党的二十大精神专题</div>
                <div class="sub-title">深入学习领会党的二十大精神实质和核心要义</div>
                <div class="button">立即学习</div>
          </div>
      </div>
    </div>

    <!-- 学习进度和课程完成情况区域 -->
    <div class="education-progress-container flex justify-content-space-between">
         <!-- 学习进度 -->
         <div style="margin-right: 10px" class="progress-box">
           <div class="mini-title flex justify-content-space-between">
              <span style="font-size: 18px;font-weight: bolder">学习进度</span>
              <span style="color: #999999">本月</span>
           </div>
           <div class="flex align-center" style="margin-top: 20px">
             <img src="../../../assets/smart/学习进度.png" style="width: 50px;height: 50px;display: block" alt="">
             <div style="margin-left: 20px;" class=" flex-auto">
                 <div style="color: #999999;font-size: 15px">已完成学时</div>
                 <div style="padding-bottom: 10px">
                   <span style="font-size: 20px;color: #333333;font-weight: bolder">{{studyInfo.studyProgress.userTimeLengSum}} </span>
                   <span style="color: #999999;font-weight: bolder">/ {{studyInfo.studyProgress.userTimeLengSum}}小时</span></div>
                   <el-progress :percentage="Number(studyInfo.studyProgress.userTimeLengSum)" color="#E53E3E" :stroke-width="8"  :format="() => ''"></el-progress>
             </div>
           </div>
        </div>
         <!-- 课程完成 -->
         <div style="margin-left: 10px" class="progress-box">
         <div class="mini-title flex justify-content-space-between">
          <span style="font-size: 18px;font-weight: bolder">课程完成</span>
          <span style="color: #999999">本月</span>
        </div>
         <div class="flex align-center" style="margin-top: 20px">
           <img src="../../../assets/smart/课程完成.png" style="width: 50px;height: 50px;display: block" alt="">
             <div style="margin-left: 20px;" class=" flex-auto">
               <div style="color: #999999;font-size: 15px">已完成课程</div>
               <div style="padding-bottom: 10px">
                 <span style="font-size: 20px;color: #333333;font-weight: bolder">{{studyInfo.courseProgress.studyUserProgressSum}} </span>
                 <span style="color: #999999;font-weight: bolder">/ {{studyInfo.courseProgress.studyCountSum}}小时</span></div>
               <el-progress :percentage="Number(studyInfo.courseProgress.studyUserProgressSum)" color="#22C55E" :stroke-width="8"  :format="() => ''"></el-progress>
             </div>
           </div>
      </div>
    </div>

    <!-- 最新课程区域 -->
    <div class="new-course-container padding-20">
      <div style="font-size: 18px;font-weight: bolder;padding-bottom: 20px">最新课程</div>
       <CourseInfo CourseInfo :courseList="courses" :showScrollIndicator="true"></CourseInfo>
    </div>

    <!-- 学习课程内容区域 -->
    <div class="new-course-container padding-20">
        <div class="flex justify-content-space-between">
          <div style="font-size: 18px;font-weight: bolder">学习课程内容</div>
          <el-button type="primary" @click="openCourseDialog">发布学习课程</el-button>
        </div>
        <div class="table-container">
          <CourseList :courseList="listedCourses"></CourseList>
        </div>
        <div class="table-footer" style="padding-bottom: 20px">
          <pagination :total="listedCourses.length" v-model:page="tableDataPage.pageNumber" v-model:limit="tableDataPage.pageSize" @pagination="getTableDataPageList" />
        </div>
    </div>

    <!-- 底部区域 -->
    <div class="new-course-container flex justify-content-space-between" style="background-color: transparent">
      <div class="flex-auto learningStatistics" style="margin-right: 10px">
            <div style="font-weight: bolder;font-size: 18px">本周学习时长统计</div>
           <EchartsComponent  :options="chartOption" class="charts-common flex-auto"></EchartsComponent>
      </div>

      <div class="flex-auto learningRanking" style="margin-left: 10px">
        <div class="flex justify-content-space-between">
          <div style="font-weight: bolder;font-size: 18px">支部学习排名</div>
          <div style="font-size: 14px;color: #999999">本月</div>
        </div>

        <div class="sortList">
          <div v-for="(item, index) in rankingList" :key="index" class="ranking-item">
            <div class="rank-badge">{{ index+1 }}</div>
            <div class="ranking-info">
              <div class="name">{{ item.committeeName }} ( {{ item.cpcUserInfoCount }} 人)</div>
              <div class="study-time">平均学时: {{ item.rankingTimeAverage }}小时</div>
            </div>
<!--            <div class="evaluation" :style="{ color: item.evaluationColor }">{{ item.evaluation }}</div>-->
          </div>
        </div>
      </div>

    </div>

    <CourseDialog  ref="courseDialogRef"></CourseDialog>

  </div>
</template>
<script setup>
import {User, Lock, Phone, Search} from '@element-plus/icons-vue';
import CourseInfo from "./component/CourseInfo.vue"
import CourseList from "./component/CourseList.vue"
import EchartsComponent from "@/components/ECharts/index.vue";
import CourseDialog from './component/CourseDialog.vue'
import {ref} from "vue";
import {
  getStudyCountProgress, getStudyCourseList,
  getStudyFinish, getStudyInfo,
  getStudyRanking,
  getStudyUserTimeInfo
} from "@/api/education/education.js";
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const courseDialogRef = ref(null);
const progressPercent = ref(90);
const courses = ref([
  {
    id: 1,
    title: '医疗质量管理规范培训',
    coverUrl: 'https://via.placeholder.com/320x180',
    type: 'required',  // 是否必修
    duration: '2',  // 学时
    studyCount: 86, // 学习人数
    progress: 60 // 学习进度
  }
]);
const listedCourses = ref([
  {
    pbStudyInfoEntity: {
      id: "3a1c061e-8d21-8a21-46a6-410a1a0cceb6",
      studyCourseName: "测试主题1",
      studyCourseStartTime: "2025-08-28 00:00:00",
      studyCourseEndTime: "2025-08-29 00:00:00",
      studyCourseTile: "测试思考",
      creationTime: "2025-07-29 11:49:21",
      extraProperties: {},
      concurrencyStamp: "56a3bc8fceab47008252469fe6bf4ce9"
    },
    fileAggregateRoots: null,
    pbStudyUserInfoEntity: [{
      id: "3a1c06db-4f9c-a44b-8836-ccdced64305c",
      studyId: "3a1c06b9-f754-f162-b8fd-2879b90141e2",
      cpcUserId: "3a1c1560-7d91-8671-866c-7838159fa73b",
      studyType: 2,
      studyProgress: "学习后思考信息，学习后思考信息，学习后思考信息，学习后思考信息，学习后思考信息，学习后思考信息",
      studyStartTime: "2025-08-29 15:13:18",
      timeLeng: 4,
      cpcInfoEntity: null,
      extraProperties: {},
      concurrencyStamp: "caffe56109ed4a5b9808e3b57867c091"
    }]
  },
]);
// 肿瘤专业医疗质量控制指标
const tableDataPage = ref({
  pageNumber: 1, // 当前页
  totalCount:0,
  pageSize:10,
  totalPages:0
});
const chartOption = ref(  {
  tooltip: {
    trigger: 'axis',
    axisPointer: {type: 'shadow'}
  },
  xAxis: {
    type: 'category',
    data: ['周三', '周四', '周五', '周六', '周日', '周一', '周二'],
    axisLabel: {
      color: '#333',
      fontSize: 12,
      interval: 0
    },
    axisLine: {
      lineStyle: {color: '#e0e0e0'}
    },
    axisTick: {alignWithLabel: true}
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 5,
    interval: 1,
    axisLabel: {
      color: '#333',
      fontSize: 12
    },
    splitLine: {
      lineStyle: {
        color: '#e0e0e0',
        type: 'dashed'
      }
    },
    axisLine: {
      lineStyle: {color: '#e0e0e0'}
    }
  },
  series: [{
      name: '数据',
      type: 'bar',
      barWidth: '40%',
      data: [2.5, 3.2, 1.8, 4.0, 3.5, 2.8, 3.0],
      itemStyle: {
        color: function(params) {
          return '#EB4F4F';
        }
      }
    }],
  grid: {
    left: '10%',
    right: '10%',
    bottom: '15%',
    top: '10%'
  }
})
const rankingList = ref([
  {
    rank: 1,
    name: "心内科党支部",
    memberCount: 32,
    averageStudyTime: "15.5 小时",
    evaluation: "优秀",
    evaluationColor: "#E53E3E"
  },
]);
const studyInfo = ref({
   studyProgress:{
      timeLengSum:0,
      userTimeLengSum:0
    },
   courseProgress :{
     studyCountSum:0,
     studyUserProgressSum:0
   }
});
const courseListRequest = ref({
  StudyCourseName: '', // 支部
  pageNumber:1,
  pageSize:10,
  totalCount:0,
  totalPages:0
});
const handleSearch = () => {
  courseListRequest.value.pageNumber = 1;
  getStudyCourse(courseListRequest.value); // 分页
};
const getTableDataPageList = () => {
  courseListRequest.value.pageNumber = 1;
  getStudyCourse(courseListRequest.value); // 分页
};

// 打开课程发布弹窗
const openCourseDialog = () => {
  courseDialogRef.value.open()
}


//API接口对接调试---------------
// 学习排名
const studyRanking = async () => {
  let result = await getStudyRanking();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200) {
     rankingList.value = data;
  }
};
// 学习进度统计数据
const studyCountProgress = async (params) => {
  let result = await getStudyCountProgress(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200) {
    studyInfo.value.studyProgress = {
       timeLengSum:data.timeLengSum,
       userTimeLengSum:data.userTimeLengSum
    };
  }
};
// 课程完成统计数据
const studyFinish = async (params) => {
  let result = await getStudyFinish(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200) {
     studyInfo.value.courseProgress = {
       studyCountSum:data.studyCountSum,
       studyUserProgressSum:data.studyUserProgressSum
    };
  }
};
// 获取本周学习时长统计
const studyUserTimeInfo = async (params) => {
  let result = await getStudyUserTimeInfo(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200) {
     const xAxisData = [];
     const seriesData = [];
     data.forEach(item => {
       xAxisData.push(item.chineseDayOfWeek);
       seriesData.push(Number(item.predictTimeCount));
     });
    chartOption.value.xAxis.data = xAxisData;
    chartOption.value.series[0].data = seriesData;
  }
};
// 获取最新课程信息
const getStudyInfoList = async () => {
  let result = await getStudyInfo();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200) {
     courses.value = data;
  }
};
// 取课程信息列表(分页)
const getStudyCourse = async (params) => {
  let result = await getStudyCourseList({pageNumber:params.pageNumber,StudyCourseName:params.StudyCourseName});
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200) {
    const { pageNumber,pageSize,totalCount,totalPages,items} = data;
    courseListRequest.value.pageNumber = pageNumber;
    courseListRequest.value.pageSize = pageSize;
    courseListRequest.value.totalCount = totalCount;
    courseListRequest.value.totalPages = totalPages;
    listedCourses.value = data.items;
    console.log("[][]取课程信息列表[][]",listedCourses.value)
  }
};
studyRanking();
studyCountProgress({userId:userStore.id});
studyFinish({userId:userStore.id});
studyUserTimeInfo({userId:userStore.id});
getStudyInfoList(); // 不分页
getStudyCourse(courseListRequest.value); // 分页



</script>
<style lang='scss' scoped>
.education-container {
  height: calc(100% - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 20px;
  .header-container{
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 5px;
    .search-box {
      .search-title{
         font-size: 20px;
         font-weight: bolder;
         color: #333333;
      }
      .search-input-box {
        .search{
          height:40px;
        }
        :deep(.el-input__wrapper) {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        .search-button {
          height:40px;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          position: relative;
          left: -1px;
        }
      }
    }
    .banner-container{
       border-radius: 5px;
       margin-top: 20px;
       width: 100%;
       background-image: url("../../../assets/smart/banner.png");
       background-size: cover;
       background-position: center ; /* 背景图居中显示 */
       background-repeat: no-repeat; /* 背景图不重复 */
       .left-box{
         background: linear-gradient(to right, #F0353A, #f88f8f);
          padding: 40px;
          box-sizing: border-box;
          width: 50%;
          height: 100%;
          border-radius: 5px;
          color: #FFFFFF;
         .title{
             font-size: 24px;
             font-weight: bolder;
         }
         .sub-title{
           padding: 10px 0;
         }
         .button{
           color: red;
           background: #FFFFFF;
           padding: 10px 15px;
           border-radius: 5px;
           width: fit-content;
           margin-top: 20px;
         }
       }
    }
  }
  .education-progress-container{
     margin-top: 20px;
    .progress-box{
      background: #FFFFFF;
      flex: 1;
      padding:25px;
      border-radius: 5px;
    }
  }
  .new-course-container {
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 5px;
  }
  .table-container{
      height: 500px;
      overflow-y: auto;
  }
  .table-footer{
     position: relative;
  }
   .learningStatistics{
      background-color: #FFFFFF;
      padding: 20px;
      border-radius: 5px;
   }
   .learningRanking{
     background-color: #FFFFFF;
     padding: 20px;
     border-radius: 5px;
    }
   .charts-common {
    height: 300px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
   .sortList{
      height: 300px;
      overflow-y: auto;
      padding: 10px;
     .ranking-item {
       display: flex;
       align-items: center;
       margin-bottom: 20px;
       padding: 10px 20px;
       border-radius: 5px;
       .rank-badge {
         width: 24px;
         height: 24px;
         padding: 20px;
         background-color: #f5f5f5;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 16px;
         font-weight: bold;
         margin-right: 15px;
       }
       .ranking-info {
         flex: 1;
       }
       .name {
         font-size: 16px;
         color: #333;
         margin-bottom: 4px;
         font-weight: 600;
       }
       .study-time {
         font-size: 14px;
         color: #999;
       }
       .evaluation {
         font-size: 14px;
         font-weight: 600;
         min-width: 60px;
         text-align: right;
       }
       //&:hover{
       //  background-color: rgba(252, 225, 225, 0.85);
       //}
       &:first-child{
         background-color: rgba(252, 225, 225, 0.85);
       }
     }

    }
}

</style>
